<template>
	<view class="content">
		<view class="header">
			当即滚动到列表底部时，自动加载更多数据
		</view>
		<view class="container">
			<view class="item" v-for="(item,index) in arrayList" :key="item">{{item}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				arrayList: []
			}
		},
		onLoad(options) {
			let newList = [];
			console.log('newList', newList);
			for (let i = 0; i < 11; i++) {
				newList.push(i)
			}
			console.log('newList1', newList);
			this.arrayList = newList

		},
		methods: {

		},
		// 页面相关事件处理函数--监听用户下拉动作
		onReachBottom: function() {
			console.log('上拉触底事件');
			let page = this.page + 1;
			let newList = [];
			console.log(page);
			let sum = 110;
			if (page <= sum / 11) {
				uni.showLoading({
					title: '加载中...'
				});
				setTimeout(function () {
					uni.hideLoading();
				}, 1000);
				for (let i = 0; i <= sum/11*page; i++) {
					newList.push(i)
				}
				console.log('newList2', newList);
				this.arrayList = newList;
				this.page = page
			} else {
				uni.showLoading({
					title: '没有更多数据了！！'
				});
				setTimeout(function () {
					uni.hideLoading();
				}, 1000);
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
	}

	.header {
		width: 100%;
		position: fixed;
		height: 150rpx;
		line-height: 150rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #ccc;
	}

	.container {
		padding-top: 150rpx;
	}

	.item {
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #ccc;
	}

	.item:last-child {
		border: none;
	}
</style>